<template>
  <div class="sjplatformSelectForm">
    <el-form :inline="true">
      <el-form-item label="项目名称">
        <el-input v-model="teamData.queryCondition.projectName" placeholder="请输入名称..." />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="sjplatformtable">
    <el-table :data="teamData.tableData" v-loading="loading" empty-text="暂无数据" stripe border>
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ $index + 1 + (currentPage - 1) * pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="projectName" label="项目名称" class-name="left-align">
        <template #default="{ row }">
          <el-tooltip class="item" effect="light" :content="row.projectName" placement="top">
            <span>{{ row.projectName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="managerName" label="项目经理" width="100" />
      <el-table-column prop="projectPassTime" label="立项通过时间" width="140">
        <template #default="{ row }">
          <span>{{ commonUtil.Methods.formatDate(row.projectPassTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="140">
        <template #default="{ row }">
          <span>{{ commonUtil.Methods.formatDate(row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" width="140">
        <template #default="{ row }">
          <span>{{ commonUtil.Methods.formatDate(row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="组建时间" width="140">
        <template #default="{ row }">
          <span>{{ commonUtil.Methods.formatDate(row.addTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="140">
        <template #default="{ row }">
          <div :class="getStatusStyle(row.status)"> {{
            getStatusEnumChineseByValue(row.status, ProcessEnum.Team) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-tooltip content="查看项目详情" placement="bottom" effect="light">
            <i class="detail-icon" @click="showDetail(row.projectId)"></i>
          </el-tooltip>
          <el-tooltip v-if="row.status == null || row.status == StatusEnum.Creating" content="团队资源设置" placement="bottom"
            effect="light">
            <i class="team-icon" @click="setTeam(row)"></i>
          </el-tooltip>
          <el-tooltip v-if="row.status > StatusEnum.Creating" content="查看团队资源" placement="bottom" effect="light">
            <i class="approvedetail-icon" @click="showTeam(row)"></i>
          </el-tooltip>
          <el-tooltip content="提交审批" v-if="row.status == StatusEnum.Creating" placement="bottom" effect="light">
            <i class="submit-icon" @click="submitForReview(row)"></i>
          </el-tooltip>
          <el-tooltip content="撤回审批" v-if="row.status == StatusEnum.SubmitApproval" placement="bottom" effect="light">
            <i class="revocation-icon" @click="withdrawReview(row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="teamData.total" :page-size="pageSize" :current-page="currentPage"
      @current-change="handleCurrentChange" />
  </div>
  <el-dialog v-model="newTeamTableVisible" :title="formTitle" width="60%" draggable :destroy-on-close="true"
    :close-on-click-modal="false" class="fullscreen-dialog">
    <TeamForm />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="newReviewTableVisible" :title="formTitle" width="80%" draggable :destroy-on-close="true"
    :close-on-click-modal="false" class="fullscreen-dialog">
    <TeamsReview :teamId="fId" />
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="newReviewTableVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-drawer v-model="isShowDetail" direction="rtl" :before-close="handleDrawerClose">
    <template #header="{ titleId }">
      <h4 :id="titleId">项目详情</h4>
    </template>
    <ProjectDetail :projectId="projectId" />
    <template #footer>
      <el-row>
        <el-col :span="24" class="align-right-buttons">
          <div>
            <el-button type="primary" @click="isShowDetail = false">确定</el-button>
          </div>
        </el-col>
      </el-row>
    </template>
  </el-drawer>
  <el-dialog v-model="newStartFlowVisible" :title="formTitle" width="50%" draggable :destroy-on-close="true">
    <FlowSelect :fid="fId" :fname="fName" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelSubmit">取消</el-button>
        <el-button type="primary" @click="confirmSubmitApprove">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import TeamForm from "./TeamForm.vue";
import TeamsReview from "../Common/TeamReview.vue";
import ProjectDetail from "../Common/ProjectDetail.vue";
import FlowSelect from "../../FlowManager/FlowSelect.vue";
import commonUtil from "../../../utils/common";
import { useProjectTeam } from "../../../hooks/ProjectManager/Plan/useProjectTeam";
import { useApproveTable } from '../../../hooks/ApproveManager/useApproveTable';
import { ProcessEnum, StatusEnum, getStatusEnumChineseByValue, getStatusStyle } from "../../../hooks/Common/useStatusEnum";

let currentPage = ref(1);
let pageSize = ref(10); // 默认每页大小
let loading = ref(false);
let isShowDetail = ref(false);
let projectId = ref('');
let fId = ref('');
let fName = ref('');
let newTeamTableVisible = ref(false);
let newReviewTableVisible = ref(false);
let newStartFlowVisible = ref(false);//启动流程窗口
let formTitle = ref('');

let { teamData, projectStore, getProjectTeams, formulateProjectTeam, updateTeamMainStatus } = useProjectTeam(currentPage, pageSize);
getProjectTeams();

let { createData, deleteDataByFid } = useApproveTable(currentPage, pageSize);

//查看详情
function showDetail(value) {
  projectId.value = value;
  isShowDetail.value = true;
}

//设置团队资源
function setTeam(value) {
  projectStore.projectModel.id = value.projectId;
  projectStore.resetTeamModel();
  projectStore.teamModel.projectId = value.projectId;
  projectStore.teamModel.projectName = value.projectName;
  formTitle.value = value.projectName + " - 团队资源组建";
  newTeamTableVisible.value = true;
}

//查看团队资源
function showTeam(team) {
  formTitle.value = '查看团队资源';
  fId.value = team.id;
  newReviewTableVisible.value = true;
}

//提交审批
function submitForReview(team) {
  formTitle.value = '提交审批';
  fId.value = team.id;
  fName.value = team.projectName + '团队资源';
  projectStore.teamModel.id = team.id;
  newStartFlowVisible.value = true;
}
//撤回审批
async function withdrawReview(team) {
  commonUtil.Methods.confirm("确定撤回审批吗？", async () => {
    projectStore.teamModel.id = team.id;
    projectStore.teamModel.status = StatusEnum.Creating;
    projectStore.teamModel.updateProperties.push('Status');
    if (await deleteDataByFid(team.id)) {
      commonUtil.Methods.ShowMessage("success", "撤回审批成功！");
      searchData();
    }
  })
}
//取消审批
function cancelSubmit() {
  newStartFlowVisible.value = false;
}
//确定提交
async function confirmSubmitApprove() {
  createData().then(() => {
    updateTeamMainStatus(projectStore.teamModel.id, StatusEnum.SubmitApproval).then(() => {
      commonUtil.Methods.ShowMessage("success", "提交审批成功！");
      newStartFlowVisible.value = false;
      searchData();
    })
  })
}

//翻页事件
function handleCurrentChange(newPage) {
  currentPage.value = newPage;
  searchData(); // 根据当前页获取数据
}

//取消
function cancel() {
  newTeamTableVisible.value = !newTeamTableVisible.value;
}

//确定
function confirm() {
  formulateProjectTeam().then(() => {
    newTeamTableVisible.value = !newTeamTableVisible.value;
    searchData();
  })
}
//查询按钮
function searchData() {
  loading.value = true;
  currentPage.value = 1;
  getProjectTeams();
  loading.value = false;
}

function handleDrawerClose() {
  projectId.value = '';
  isShowDetail.value = false;
}
</script>